<template>
  <!--   <div
    v-loading="loading"
    class="home"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="#ffffff"
  /> -->

  <div class="home-wrap" id="app">
    <!--头部导航 -->
    <div class="header-wrap">
      <div class="header">
        <div class="container clearfloat">
          <a href="javascript:void(0);" class="fl logo">
            <img src="@/assets/images/door/icon_logo.png" alt="" />
          </a>
          <ul class="fr">
            <li @mouseenter="closeList()">
              <a href="#">首页</a>
            </li>
            <li class="set" @mouseenter="showSetList()">
              <a href="javascript:void(0);">个人设置</a>
              <div
                class="sle-card"
                v-show="showSet"
                @mouseleave="closeSetList()"
              >
                <!-- 未实名认证 -->
                <div class="noreal" v-if="setStatus">
                  <p>请完成实名认证</p>
                  <a href="#">实名认证</a>
                </div>
                <!-- 以实名认证未完善业务 -->
                <div class="list" v-if="!setStatus">
                  <div class="item">
                    <a href="#">实名认证</a>
                  </div>
                  <div class="item complete">
                    <a href="#">
                      <img
                        src="@/assets/images/door/icon_complete_business.png"
                        alt=""
                      />
                      <h5>完善业务</h5>
                      <p>
                        业务添加完成<br />
                        即可做单
                      </p>
                    </a>
                  </div>
                </div>
                <!-- 以实名以完善业务 -->
                <div class="list" v-if="!setStatus">
                  <div class="item">
                    <a href="#">实名认证</a>
                  </div>
                  <div class="item">
                    <a href="#">个人业务</a>
                  </div>
                </div>
              </div>
            </li>
            <li class="admin" @mouseenter="showAdminList()">
              <a href="javascript:void(0);">商户消化后台</a>
              <div
                class="sle-card"
                v-show="showAdmin"
                @mouseleave="closeAdminList()"
              >
                <!-- 未入驻 -->
                <div class="list" v-if="adminStatus">
                  <div class="item complete">
                    <a href="#">
                      <img
                        src="@/assets/images/door/icon_entry_shop.png"
                        alt=""
                      />
                      <h5>店铺入驻</h5>
                      <p>
                        入驻店铺完成<br />
                        参与平台抢单、接单
                      </p>
                    </a>
                  </div>
                </div>
                <!-- 以入驻 -->
                <div class="list" v-if="!adminStatus">
                  <div class="item">
                    <a href="#">工商后台</a>
                  </div>
                  <div class="item">
                    <a href="#">综合后台</a>
                  </div>
                  <div class="item">
                    <a href="#">资产后台</a>
                  </div>
                  <div class="item">
                    <a href="#">资质后台</a>
                  </div>
                </div>
              </div>
            </li>
            <li class="user" v-if="isLogin" @mouseenter="closeList()">
              <a href="javascript:void(0);">18293050500</a>
            </li>
            <li class="tag" v-if="!isLogin" @mouseenter="closeList()">
              <a
                href="#"
                @click="
                  ruoterJump({ name: 'login', params: { isRegister: false } })
                "
                >登录</a
              >
            </li>
            <li class="tag" v-if="!isLogin" @mouseenter="closeList()">
              <a
                href="#"
                @click="
                  ruoterJump({ name: 'login', params: { isRegister: true } })
                "
                >注册</a
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="banner">
        <ul class="container clearfloat border-box">
          <li>
            <img src="@/assets/images/door/footer_ios.png" alt="" />
          </li>
          <li>
            <img src="@/assets/images/door/footer_ios.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map">
      <div class="container clearfloat">
        <div class="main fr">
          <h3>企大宝</h3>
          <p class="text">
            企大宝，隶属于成都聚蓉晟商务信息咨询有限公司，为<br />
            全国企业服务人士提供优质的客户资源。<br />
            平台覆盖<span>100+</span>热门城市和区域，拥有<span>3000+</span>商家。<br />
            企大宝平台采用的人工智能分单系统，标准化的管理方<br />
            式，全程一对一的服务模式。
          </p>
          <div class="explain border-box">
            <h5>我们的宗旨</h5>
            <p>
              让服务简单标准，让经营轻松满意！<br />
              我们，正在变革行业模式...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 运营模式 -->
    <div class="model">
      <div class="container">
        <div class="module-title">运营模式</div>
        <ul class="clearfloat">
          <li>
            <img src="@/assets/images/door/icon_leaflets.png" alt="" />
            <h5>区域派单模式</h5>
            <p>
              平台针对指定区域/业态/商家<br />
              进行自动分派
            </p>
          </li>
          <li>
            <img src="@/assets/images/door/icon_grapsheet.png" alt="" />
            <h5>区域抢单模式</h5>
            <p>
              合作者可以在平台针对指定区<br />
              域/业态的订单进行抢接务
            </p>
          </li>
          <li>
            <img src="@/assets/images/door/icon_intelligence.png" alt="" />
            <h5>智能管理模式</h5>
            <p>
              平台可以通过人工智系统提供<br />
              业务服务节点，同时对完成效<br />
              果进行跟踪质检
            </p>
          </li>
          <li>
            <img src="@/assets/images/door/icon_settlement.png" alt="" />
            <h5>自动结算模式</h5>
            <p>
              平台针对完结且通过质检的订<br />
              单进行审核，自动结算相应费<br />
              用至经营者后台
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 业务范围 -->
    <div class="scope border-box">
      <div class="container">
        <div class="module-title">业务范围</div>
        <ul class="clearfloat">
          <li>
            <img src="@/assets/images/door/image_law.png" alt="" class="bg" />
            <img src="@/assets/images/door/icon_law.png" alt="" class="ico" />
            <p>法律</p>
          </li>
          <li>
            <img
              src="@/assets/images/door/image_knowledge.png"
              alt=""
              class="bg"
            />
            <img
              src="@/assets/images/door/icon_knowledge.png"
              alt=""
              class="ico"
            />
            <p>知产</p>
          </li>
          <li>
            <img
              src="@/assets/images/door/image_circles.png"
              alt=""
              class="bg"
            />
            <img
              src="@/assets/images/door/icon_circles.png"
              alt=""
              class="ico"
            />
            <p>工商</p>
          </li>
          <li>
            <img
              src="@/assets/images/door/image_accounting.png"
              alt=""
              class="bg"
            />
            <img
              src="@/assets/images/door/icon_accounting.png"
              alt=""
              class="ico"
            />
            <p>会计</p>
          </li>
          <li>
            <img
              src="@/assets/images/door/image_personnel_matters.png"
              alt=""
              class="bg"
            />
            <img
              src="@/assets/images/door/icon_personnel_matters.png"
              alt=""
              class="ico"
            />
            <p>人事</p>
          </li>
          <li>
            <img
              src="@/assets/images/door/image_comprehensive.png"
              alt=""
              class="bg"
            />
            <img
              src="@/assets/images/door/icon_comprehensive.png"
              alt=""
              class="ico"
            />
            <p>综合</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 入住流程 -->
    <div class="flow">
      <div class="module-title">商家入驻流程</div>
      <div class="main">
        <img src="@/assets/images/door/image_entry_process.png" alt="" />
      </div>
    </div>
    <!-- S底部 -->
    <div class="footer clearFix">
      <footer class="w1200">
        <div class="detail">
          <section class="tel_left">
            <h3>招商热线</h3>
            <p>
              <span>18328315610（雷先生）</span
              ><span>18227660713（邹先生）</span>
            </p>
            <p>18382489008（许先生）</p>
          </section>
          <section class="link_middle">
            <a href="#">关于我们</a>
            <a href="#">入住指南</a>
          </section>
          <section class="qrcode_right">
            <p>
              <img src="@/assets/images/door/footer_ios.png" alt="" />
              <span>ios版下载</span>
            </p>
            <p>
              <img src="@/assets/images/door/footer_android.png" alt="" />
              <span>android版下载</span>
            </p>
          </section>
        </div>
        <!-- 底部备案信息 -->

        <div class="register_info">
          Copyright © 2019-2020 成都聚蓉晟商务信息咨询有限公司 版权所有
          保留一切权利 备案号 :
          <a
            href="http://www.beian.miit.gov.cn/"
            style="color: #ADADAD"
            target="_blank"
            >蜀ICP备19038831号-1</a
          >
        </div>
      </footer>
    </div>
  </div>

  <!-- <div id="regionZTree" class="ztree"/> -->
</template>

<script>
// 加 载 页
// eslint-disable-next-line no-unused-vars
import zTree from "ztree";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      loading: true,
      isLogin: false, // 是否已登录
      setStatus: true,
      adminStatus: true,
      showSet: false,
      showAdmin: false
    };
  },
  computed: {
    ...mapState(["token"])
  },
  watch: {},
  async mounted() {
    return false;
    await this.initRouters(); // 初始化路由
    const _loginData = JSON.parse(localStorage.getItem("loginData"));
    const _personMsgz = JSON.parse(localStorage.getItem("personMsgz"));
    const _activeRoute = JSON.parse(localStorage.getItem("activeRoute"));
    const _storeInfoData =
      localStorage.getItem("storeInfoData") &&
      JSON.parse(localStorage.getItem("storeInfoData"));
    const _transactionItem = JSON.parse(
      localStorage.getItem("transactionItem")
    );
    if (
      _loginData &&
      Object.keys(_loginData).length &&
      _activeRoute &&
      Object.keys(_activeRoute).length
    ) {
      this.setLoginData(_loginData);
      this.setStoreInfoData(_personMsgz);
      this.setYtData(_storeInfoData);
      this.setTransactionItem(_transactionItem);
      this.ruoterJump({ name: "startPage" });
    } else {
      await this.initreq(); // 初始化请求
    }
  },
  activated() {
    //
  },
  created() {
    //
  },
  beforeDestroy() {
    //
  },
  methods: {
    zTreeBeforeExpand() {
      //
    },
    ...mapActions(["ruoterJump", "initRouters"]),
    ...mapActions("configModule", ["initConfig"]),
    ...mapMutations([
      "setStoreInfoData",
      "setLoginData",
      "setYtData",
      "setTransactionItem" // 缓存办理中的数据
    ]),

    async initreq() {
      // 做一些异步操作
      this.ruoterJump({ name: "startPage" });
    },
    //新增代码
    showSetList() {
      this.showSet = true;
      this.showAdmin = false;
    },
    showAdminList() {
      this.showAdmin = true;
      this.showSet = false;
    },
    closeSetList() {
      this.showSet = false;
    },
    closeAdminList() {
      this.showAdmin = false;
    },
    closeList() {
      this.showSet = false;
      this.showAdmin = false;
    }
  }
};
</script>

<style lang="less">
@import "~@/assets/css/reset.less"; //引入全局less文件
@import "~@/assets/css/footer.less"; //引入全局less文件
@import "~@/assets/css/index.less"; //引入全局less文件
.home {
  width: 100%;
  height: 100%;
}
</style>
